Vibes

CSS is really, really great but it’s lacking things like, console.log(). And sometimes I truly miss it. CSS tends to give us the silent treatment when something goes wrong. So helpful, right?

But we actually do have something incredibly useful, browser DevTools.

When working with Grid, Subgrid or Flexbox DevTools is like a helping hand. You can hover over the layout badges to see the overlay, you probably already do that. But did you know that if you click the badge instead of hovering, the overlay becomes persistent?

That means you can resize your window and watch the layout shift in real time as the viewport changes. It’s such a simple trick but honestly, a game changer.

When one no isn't enough

Today’s treat, a cheat sheet. You know the no (!) expression, you use it all the time to check for falsy values. But what about the no-no (!!)? This is the one that turns value into a Boolean value.

Last week, I had to look it up for a specific case and thought to myself, “This won’t be the last time I need this.” So here it is, served on a silver plate, the !! cheat sheet.

This is really useful when you want a clean true or false, and not just something truthy or falsy.

Assignments, logic or not?

Who doesn’t love shorthands? Well, at least the ones that are easy to understand. Logical assignment operators are quite nice, don’t you think? Do you use this one?

x ??= 8;

It’s actually equivalent to:

if (x === null || x === undefined) {
  x = 8;
}

Much shorter and sweeter, right!?

Console friends and family

I know you always ship excellent code, but let’s use our imagination and think of a scenario where things go really bad and you find a tricky bug in your JavaScript code. What do you do? You start debugging. Typically, you set breakpoints or use our old friend ‘console.log()’. But did you know ‘console.log()’ has some quite smart siblings as well?

console.table(["CSS", "HTML", "typescript", "javascript"]);
console.dir(yourFancyObject);
console.count();

‘console.table()’ takes an array or object and logs the data as a table, with one element or property on each row. ‘console.dir()’ on the other hand displays a list of the properties and their values in the given object. The last one is ‘console.count()’, and can be placed in a function to keep track of how many times that particulary function has been called.

Using these can make your debugging process much smoother, try it!